<template>
  <MonitorLayout>
    <div class="monitor-dashboard">
      <!-- 顶部核心区 -->
      <div class="header-section">
        <!-- 左侧：大屏控制模块 -->
        <globalStatus />

        <!-- 中央：全局态势感知模块 -->
        <div class="global-status-module">
          <div class="health-score">
            <div class="score-circle">
              <span class="score-text">85</span>
              <span class="score-label">健康度</span>
            </div>
          </div>
          <div class="kpi-cards">
            <div class="kpi-card status-green">
              <div class="kpi-title">服务器在线率</div>
              <div class="kpi-value">98.5%</div>
            </div>
            <div class="kpi-card status-yellow">
              <div class="kpi-title">平均响应时间</div>
              <div class="kpi-value">126ms</div>
            </div>
            <div class="kpi-card status-green">
              <div class="kpi-title">当前QPS</div>
              <div class="kpi-value">12,560</div>
            </div>
            <div class="kpi-card status-green">
              <div class="kpi-title">活跃用户数</div>
              <div class="kpi-value">2,456</div>
            </div>
          </div>
        </div>

        <!-- 右侧：告警与通知模块 -->
        <div class="alert-module">
          <div class="alert-header">实时告警</div>
          <div class="alert-list">
            <div class="alert-item high">[严重] CPU使用率超过90%</div>
            <div class="alert-item medium">[警告] 内存使用率超过80%</div>
            <div class="alert-item high">[严重] 服务响应超时</div>
          </div>
        </div>
      </div>

      <!-- 中部监控区 -->
      <div class="main-section">
        <!-- 左侧列：基础设施监控 -->
        <div class="left-column">
          <div class="server-monitor">
            <div class="chart-container">
              <div class="chart-placeholder">服务器监控图表</div>
            </div>
          </div>

          <div class="log-monitor">
            <div class="log-header">实时日志</div>
            <div class="log-content">
              <div class="log-line">
                2025-04-05 10:30:22 [INFO] User login successful
              </div>
              <div class="log-line">
                2025-04-05 10:30:23 [WARN] High memory usage detected
              </div>
              <div class="log-line">
                2025-04-05 10:30:25 [ERROR] Service timeout
              </div>
            </div>
            <div class="event-chart">
              <div class="chart-placeholder">高频事件TOP5</div>
            </div>
          </div>
        </div>

        <!-- 中间列：服务治理核心 -->
        <div class="center-column">
          <div class="project-monitor">
            <div class="status-lights">
              <div class="status-light green"></div>
              <div class="status-light yellow"></div>
              <div class="status-light green"></div>
              <div class="status-light red"></div>
            </div>
            <div class="service-charts">
              <div class="chart-placeholder">QPS柱状图</div>
              <div class="chart-placeholder">响应时间折线图</div>
              <div class="chart-placeholder">错误率面积图</div>
            </div>
          </div>

          <div class="topology-module">
            <div class="chart-placeholder">服务依赖与拓扑图</div>
          </div>
        </div>

        <!-- 右侧列：用户与趋势分析 -->
        <div class="right-column">
          <div class="user-behavior">
            <div class="chart-placeholder">实时访问世界地图</div>
            <div class="chart-placeholder">活跃用户趋势折线图</div>
          </div>

          <div class="trend-analysis">
            <div class="chart-placeholder">历史趋势与对比分析</div>
          </div>
        </div>
      </div>

      <!-- 底部闭环区 -->
      <div class="footer-section">
        <div class="ticket-management">
          <div class="ticket-column">
            <div class="column-header">待处理</div>
            <div class="ticket-card high">服务器CPU过载</div>
            <div class="ticket-card medium">内存使用率过高</div>
          </div>
          <div class="ticket-column">
            <div class="column-header">处理中</div>
            <div class="ticket-card medium">网络延迟增加</div>
          </div>
          <div class="ticket-column">
            <div class="column-header">已解决</div>
            <div class="ticket-card low">数据库连接超时</div>
            <div class="ticket-card low">服务重启完成</div>
          </div>
          <div class="ticket-stats">
            <div class="stats-chart">
              <div class="chart-placeholder">告警等级环形图</div>
            </div>
            <div class="mttr-card">
              <div class="mttr-value">25分钟</div>
              <div class="mttr-label">平均解决时长</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </MonitorLayout>
</template>

<script setup lang="ts">
import MonitorLayout from "@/components/layout/MonitorLayout.vue";
import globalStatus from "@/views/global-status/index.vue";
</script>

<style scoped>
.monitor-dashboard {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* 顶部区域样式 */
.header-section {
  height: 25%;
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.global-status-module {
  width: 70%;
  display: flex;
  flex-direction: column;
  background: rgba(30, 30, 30, 0.8);
  border-radius: 10px;
  padding: 10px;
}

.health-score {
  height: 70%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.score-circle {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: linear-gradient(135deg, #00b09b, #96c93d);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.score-text {
  font-size: 36px;
  font-weight: bold;
}

.score-label {
  font-size: 16px;
}

.kpi-cards {
  height: 30%;
  display: flex;
  gap: 10px;
  justify-content: space-around;
}

.kpi-card {
  flex: 1;
  background: rgba(50, 50, 50, 0.8);
  border-radius: 5px;
  padding: 10px;
  text-align: center;
}

.kpi-title {
  font-size: 14px;
  margin-bottom: 5px;
}

.kpi-value {
  font-size: 20px;
  font-weight: bold;
}

.status-green {
  border-left: 4px solid #00ff00;
}

.status-yellow {
  border-left: 4px solid #ffff00;
}

.status-red {
  border-left: 4px solid #ff0000;
}

.alert-module {
  width: 20%;
  background: rgba(20, 20, 20, 0.9);
  border-radius: 10px;
  padding: 10px;
  display: flex;
  flex-direction: column;
}

.alert-header {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
  text-align: center;
}

.alert-list {
  flex: 1;
  overflow-y: auto;
}

.alert-item {
  padding: 8px;
  margin-bottom: 5px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.5);
}

.alert-item.high {
  color: #ff0000;
  border: 1px solid #ff0000;
}

.alert-item.medium {
  color: #ffff00;
  border: 1px solid #ffff00;
}

/* 中部区域样式 */
.main-section {
  height: 55%;
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.left-column,
.center-column,
.right-column {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.left-column {
  width: 25%;
}

.center-column {
  width: 50%;
}

.right-column {
  width: 25%;
}

.server-monitor,
.log-monitor,
.project-monitor,
.topology-module,
.user-behavior,
.trend-analysis {
  background: rgba(30, 30, 30, 0.8);
  border-radius: 10px;
  padding: 10px;
}

.server-monitor {
  height: 50%;
}

.log-monitor {
  height: 50%;
  display: flex;
  flex-direction: column;
}

.log-header {
  margin-bottom: 5px;
  font-weight: bold;
}

.log-content {
  flex: 1;
  background: #000;
  padding: 10px;
  font-family: monospace;
  font-size: 12px;
  overflow-y: auto;
  margin-bottom: 10px;
}

.log-line {
  margin-bottom: 3px;
}

.event-chart {
  height: 30%;
}

.project-monitor {
  height: 40%;
}

.status-lights {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.status-light {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.status-light.green {
  background: #00ff00;
  box-shadow: 0 0 10px #00ff00;
}

.status-light.yellow {
  background: #ffff00;
  box-shadow: 0 0 10px #ffff00;
}

.status-light.red {
  background: #ff0000;
  box-shadow: 0 0 10px #ff0000;
}

.service-charts {
  display: flex;
  gap: 10px;
}

.service-charts .chart-placeholder {
  flex: 1;
  text-align: center;
  line-height: 60px;
}

.topology-module {
  height: 60%;
}

.user-behavior {
  height: 50%;
}

.user-behavior .chart-placeholder {
  height: 50%;
  text-align: center;
  line-height: 60px;
}

.trend-analysis {
  height: 50%;
}

/* 底部区域样式 */
.footer-section {
  height: 20%;
}

.ticket-management {
  height: 100%;
  background: rgba(30, 30, 30, 0.8);
  border-radius: 10px;
  padding: 10px;
  display: flex;
  gap: 10px;
}

.ticket-column {
  flex: 1;
  background: rgba(50, 50, 50, 0.5);
  border-radius: 5px;
  padding: 10px;
}

.column-header {
  text-align: center;
  font-weight: bold;
  margin-bottom: 10px;
}

.ticket-card {
  padding: 8px;
  margin-bottom: 5px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.5);
  font-size: 12px;
}

.ticket-card.high {
  border-left: 3px solid #ff0000;
}

.ticket-card.medium {
  border-left: 3px solid #ffff00;
}

.ticket-card.low {
  border-left: 3px solid #00ff00;
}

.ticket-stats {
  width: 30%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.stats-chart {
  height: 70%;
}

.mttr-card {
  height: 30%;
  background: rgba(50, 50, 50, 0.5);
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.mttr-value {
  font-size: 20px;
  font-weight: bold;
}

.chart-placeholder {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 5px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #888;
}
</style>
